<!-- 物流线路 - 表单编辑页面 -->
<template>
	<el-container
		style="background-color: #fff; height: 100%; padding: 20px; box-sizing: border-box; "
	>
		<el-aside
			width="300px"
			style="overflow-y: scroll; height: 100%;  border-right: 1px solid #DCDFE6; "
		>
			<!-- <div>接口清单</div>-->
			<div v-for="(group, groupIndex) in apiInfos">
				<div style="line-height: 32px; height: 32px;  font-size: 14px;color: #333;  ">
					{{ group.name }}
				</div>
				<div
					v-for="(item, index) in group.children"
					:class="
						codeForm.apiUrl == item.apiUrl
							? 'active-api-menu  active-api-code'
							: 'active-api-menu unactive-api-code'
					"
					@click="changeCodeForm(item)"
				>
					{{ item.apiName }}
				</div>
			</div>
		</el-aside>

		<el-main style="padding-left: 14px;">
			<div class=" flex_col h_fill">
				<div class="scroll_auto flex_cell">
					<ex_header_spiler title="应用信息"></ex_header_spiler>
					<div style="height: 20px;"></div>
					<el-descriptions
						title=""
						border
						:labelStyle="{ width: '120px' }"
						:contentStyle="{ width: '400px' }"
					>
						<el-descriptions-item :label="$tt('label_srm_api_service_platform_name')">{{
							formValue.platformName
						}}</el-descriptions-item>
						<el-descriptions-item :label="$tt('label_srm_api_service_platform_code')">{{
							formValue.platformCode
						}}</el-descriptions-item>
						<el-descriptions-item label="应用名">{{
							formValue.appName
						}}</el-descriptions-item>
					</el-descriptions>

					<div
						v-if="!editModel"
						style="width: 100%; padding-top: 80px; color: #666; text-align: center; font-size: 14px; "
					>
						<i class="el-icon-warning"></i>
						请选择要配置的接口
					</div>

					<ex_header_spiler
						v-if="editModel"
						title="应用动态代码配置"
						style="margin-top: 24px; "
					></ex_header_spiler>

					<el-form
						ref="formEl"
						:model="formValue"
						:rules="rules"
						class="common-form-panel-div"
						style="padding: 0px 10px; margin-bottom: 90px; margin-top: 16px; "
					>
						<el-row v-if="editModel">
							<el-col>
								<el-form-item label="接口名">
									{{ codeForm.apiName }}
								</el-form-item>
							</el-col>
						</el-row>

						<el-row v-if="editModel">
							<el-col>
								<el-form-item label="" labelWidth="0px">
									<el-switch
										v-model="codeForm.open"
										active-value="ENABLE"
										inactive-value="DISABLED"
										:active-text="
											isGlobalConfig ? '开启拦截器代码配置' : '开启参数转换'
										"
									></el-switch>
								</el-form-item>
							</el-col>

							<el-col v-if="codeForm.apiUrl == '_customer_to_open_'">
								<el-form-item label="" labelWidth="0px">
									<el-switch
										v-model="codeForm.openSign"
										active-value="Y"
										inactive-value="N"
										active-text="启用内置签名"
									></el-switch>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row v-if="editModel">
							<el-col v-if="codeForm.apiUrl == '_customer_to_open_'">
								<el-form-item label="" labelWidth="0px">
									<el-switch
										v-model="codeForm.coverDefaultUrl"
										active-value="Y"
										inactive-value="N"
										active-text="使用自定义url"
									></el-switch>
								</el-form-item>
							</el-col>

							<el-col v-if="codeForm.apiUrl == '_customer_to_open_'">
								<el-form-item label="">
									<el-input
										v-model="codeForm.userRequestUrl"
										:disabled="codeForm.coverDefaultUrl == 'N'"
									>
										<template slot="prepend"
											>https://{server_url}/open-sdk/</template
										>
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>

						<el-row v-if="isGlobalConfig && editModel">
							<el-col style="width: 100%;">
								<el-form-item
									:label="
										'拦截器代码配置, 格式: java, ' +
											(codeForm.apiUrl == '_customer_to_open_'
												? '(需实现 RequestApiInterceptor 接口)'
												: '(需实现 ResponseApiInterceptor 接口)')
									"
								>
									<code-editor
										v-model="codeForm.input"
										height="500px"
									></code-editor>
								</el-form-item>
							</el-col>
						</el-row>

						<template v-else>
							<el-row v-if="editModel">
								<el-col style="width: 100%;">
									<el-form-item
										:label="
											codeForm.apiType == 'RequestApi'
												? '入参格式转换（格式: javascript）（将`上游系统`的入参格式转换成`跨运宝`入参格式）'
												: '回传参数转换（格式: javascript）（将`跨运宝`参数格式转换成`上游系统`的入参格式）'
										"
									>
										<code-editor
											v-model="codeForm.input"
											height="500px"
										></code-editor>
									</el-form-item>
								</el-col>
							</el-row>

							<el-row v-if="editModel && codeForm.outputType != 'void'">
								<el-col style="width: 100%;">
									<el-form-item
										:label="
											codeForm.apiType == 'RequestApi'
												? '返回值格式转换（格式: javascript）（将`跨运宝`的返回值转换成`上游系统`的定义接收格式）'
												: '返回值格式转换（格式: javascript）（将`上游系统`的返回值，转换成`跨运宝`定义的接收接口）'
										"
									>
										<code-editor
											v-model="codeForm.output"
											height="400px"
										></code-editor>
									</el-form-item>
								</el-col>
							</el-row>
						</template>
					</el-form>
				</div>
				<div class="page_rela_bottom_area" v-if="editModel">
					<el-button type="primary" @click="submitForm()">保 存</el-button>
				</div>
			</div>
		</el-main>
	</el-container>
</template>

<script>
import CodeEditor from '@/component/base/code-editor.vue'

export default {
	title: '开放平台动态代码编辑',

	components: { CodeEditor },

	data() {
		return {
			formSaving: false,

			requestInterceptorVisible: false,
			responseInterceptorVisible: false,

			appId: '',

			formValue: {
				appSecret: '',
				platformCode: '',
				accountId: ''
			},

			codeForm: {
				open: false,
				code: ''
			},

			apiInfos: [],
			rules: {
				appName: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
				callbackUrl: [{ required: true, message: '请输入回传地址', trigger: 'callbackUrl' }]
			},

			isGlobalConfig: false,

			editModel: false
		}
	},

	watch: {},

	created() {
		let _this = this
		let formId = this.$route.query.id

		_this.appId = formId

		if (!formId) {
			_this.$message({ type: 'error', message: '参数错误' })
			return
		}
		_this.$ajax({
			url: '/open-api/open/OpenApiConfigRpc/getAppDetail.json?id=' + formId,
			success: function(res) {
				if (res && res.data) {
					_this.formValue = res.data
				} else {
					_this.$alert('应用信息不存在', '提示', {
						confirmButtonText: '确定',
						callback: action => {
							_this.$tag.tagClose()
						}
					})
				}
			}
		})

		_this.loadAllApis()
	},

	mounted() {
		var _this = this
	},

	destroyed() {},

	computed: {},

	methods: {
		loadAllApis() {
			let _this = this

			_this.$getAllDocs(function(docs) {
				let apiInfos = [
					{
						name: '通用全局配置',
						children: [
							{
								apiUrl: '_customer_to_open_',
								apiName: '客户系统 -> 开放平台拦截器配置'
							},
							{
								apiUrl: '_open_to_customer_',
								apiName: '开放平台 -> 客户系统拦截器配置'
							}
						]
					}
				]

				let erpGroups = docs.ERP
				let wmsGroups = docs.WMS

				erpGroups.forEach(group => {
					group.name = 'ERP ' + group.name
				})
				wmsGroups.forEach(group => {
					group.name = 'WMS ' + group.name
				})

				apiInfos = apiInfos.concat(erpGroups)
				apiInfos = apiInfos.concat(wmsGroups)

				_this.apiInfos = apiInfos
			})
		},

		changeCodeForm(item) {
			let _this = this

			_this.codeForm.apiUrl = item.apiUrl
			_this.isGlobalConfig =
				_this.codeForm.apiUrl == '_customer_to_open_' ||
				_this.codeForm.apiUrl == '_open_to_customer_'
			_this.editModel = true

			let detailUrl = _this.isGlobalConfig
				? '/open-api/open/OpenCodeRpc/getAppConfig.json'
				: '/open-api/open/OpenCodeRpc/getApiConfig.json'

			_this.$ajax({
				url: detailUrl,
				data: {
					appId: _this.appId,
					apiUrl: item.apiUrl
				},
				success: function(res) {
					if (res && res.data) {
						let tmp = res.data
						_this.codeForm = {
							..._this.codeForm,
							...{
								id: tmp.id,
								open: tmp.open,
								httpUrl: tmp.httpUrl,
								input: tmp.input,
								output: tmp.output,
								coverDefaultUrl: tmp.coverDefaultUrl,
								openSign: tmp.openSign,
								userRequestUrl: tmp.userRequestUrl,

								appId: _this.appId,

								apiUrl: item.apiUrl,
								apiName: item.apiName,
								outputType: item.outputType,
								apiType: item.apiType
							}
						}
					}
				}
			})
		},

		submitForm() {
			let _this = this

			_this.$refs['formEl'].validate(valid => {
				let submitUrl = _this.isGlobalConfig
					? '/open-api/open/OpenCodeRpc/updateAppConfig.json'
					: '/open-api/open/OpenCodeRpc/updateApiConfig.json'

				if (valid) {
					_this.$ajax({
						url: submitUrl,
						type: 'json',
						data: _this.codeForm,
						success: responseData => {
							this.$message({
								showClose: true,
								message: '提交成功',
								type: 'success'
							})
						}
					})
				} else {
					return false
				}
			})
		},

		goback() {
			this.$tag.tagClose()
		}
	}
}
</script>
<style>
.active-api-menu {
	padding-left: 24px;
	line-height: 32px;
	height: 32px;
	font-size: 14px;
	color: #606266;
	cursor: pointer;
}

.active-api-code {
	background-color: #d8e9ff;
	font-weight: bold;
}

.unactive-api-code {
	background-color: #fff;
}
</style>
